<template>
  <div class="p-2 w-full bg-white relative min-h-screen"> <!-- 头部操作栏 -->
    <div class="my-2 p-4 flex justify-between items-center bg-gray-50">
      <div class="flex items-center gap-4">
        <div class="text-2xl font-bold text-gray-800">{{ t('便携式电池详情') }}</div>
      </div>
      <div class="flex gap-2">
        <el-button type="primary" @click="handleEdit"><i class="el-icon-edit mr-1"></i>{{ t('编辑') }}</el-button>
        <el-button @click="goBack"><i class="el-icon-back mr-1"></i>{{ t('返回列表') }}</el-button>
      </div>
    </div>
    <!-- 加载状态 -->
    <div v-if="loading" class="flex justify-center items-center py-20">
      <el-icon class="is-loading mr-2" size="24">
        <Loading />
      </el-icon>
      <span>{{ t('加载中') }}</span>
    </div>

    <!-- 详情内容 -->
    <div v-else class="my-2 p-4 bg-gray-50">
      <!-- 基本信息概览 -->
      <div class="mb-6 p-4 bg-white rounded-lg shadow">
        <div class="mx-8 flex justify-between items-start gap-4">
          <!-- 左侧信息 -->
          <div class="flex flex-col justify-between">
            <div class="flex items-center gap-4 mb-4">
              <div class="text-sm text-gray-500">{{ t('电池护照ID') }}</div>
              <el-tag :type="getStatusTagType(detailData.documentStatus)" size="large">
                {{ getStatusLabel(detailData.documentStatus) }}
              </el-tag>
            </div>

            <div class="text-lg font-semibold mb-2">
              #{{ detailData.batteryPassportId || '-' }}
            </div>

            <div class="flex items-center gap-4 mb-4">
              <div>
                <div class="text-sm text-gray-500">{{ t('电池标识') }}</div>
                <div class="text-sm font-medium">{{ detailData.batteryId || '-' }}</div>
              </div>
              <img alt="CN" class="w-12 h-12 object-contain" src="@/assets/images/CN.png"/>
            </div>

            <div class="flex justify-between gap-8 text-xs text-gray-400">
              <span>{{ t('最后更新') }}: {{ formatDate(detailData.updateTime, "YYYY-MM") }}</span>
              <span>{{ t('制造日期') }}: {{ formatDate(detailData.createTime, "YYYY-MM") }}</span>
            </div>
          </div>

          <!-- 中间图片 -->
          <div class="flex flex-col items-center">
            <img alt="电池图片"
                 class="w-32 h-32 object-contain border border-gray-200 rounded-lg bg-gray-50"
                 src="@/assets/images/battery.png">
            <div class="text-xs text-gray-400 mt-2">{{ t('此图片仅供展示使用') }}</div>
          </div>

          <!-- 右侧操作 -->
          <div class="flex flex-col items-center gap-3">
            <QrcodeVue :size="120" :value="qrValue" background="#ffffff"
                       class="m-2 border border-[#a53b27] rounded-lg p-3 bg-white" foreground="#000000"
                       level="H"/>
            <div class="mb-2 text-xs text-gray-500 break-words">
              #{{detailData.batteryPassportId}}
            </div>
            <div class="flex flex-col gap-2 items-center">
              <div class="flex items-center gap-2 cursor-pointer hover:text-blue-500">
                <img alt="" class="w-4 h-4" src="@/assets/images/print.png">
                <span class="text-sm text-gray-500">{{ t('打印') }}</span>
              </div>
              <div class="flex items-center gap-2 cursor-pointer hover:text-blue-500" @click="goTo(qrValue2)">
                <img alt="" class="w-4 h-4" src="@/assets/images/view.png">
                <span class="text-sm text-gray-500">{{ t('查看') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 标签页内容 -->
      <el-tabs class="w-full" stretch>
        <!-- 基本信息 -->
        <el-tab-pane :label="t('基本信息')">
            <!-- 基本信息卡片 -->
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <InfoItem :value="detailData.batteryPassportId" :label="t('便携式电池护照标识')"/>
                <InfoItem :value="detailData.batteryId" :label="t('便携式电池标识')"/>
                <InfoItem :value="detailData.manufacturerId" :label="t('制造商标识符')"/>
                <!--                <InfoItem :value="getLabelByValue(BatteryCategory, detailData.batteryCategory)" :label="t('便携式电池类别')"/>-->
                <InfoItem :value="formatDate(detailData.manufacturingDate)" :label="t('制造日期')"/>
                <InfoItem :value="detailData.batteryMass" :unit="'kg'" :label="t('便携式电池质量')"/>
                <InfoItem :value="detailData.ratedCapacity" :unit="'Ah'" :label="t('额定容量')"/>
                <InfoItem :value="detailData.manufacturingLocation" :label="t('制造地点')" type="longtext"/>
              </div>
        </el-tab-pane>

        <!-- 电池材料和组成 -->
        <el-tab-pane :label="t('电池材料和组成')">
          <div class="space-y-4">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <InfoItem :value="detailData.batteryChemistry" :label="t('电池化学体系')"/>
                <InfoItem :value="detailData.criticalRawMaterial" :label="t('关键原材料')"/>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <InfoItem :value="detailData.hazardousSubstance" :label="t('有害物质')"/>
              </div>
              <div class="mt-3">
                <InfoItem :value="detailData.substanceImpactDescription" :label="t('物质影响描述')" type="longtext"/>
              </div>
          </div>
        </el-tab-pane>
        <!-- 符号、标签和文档 -->
        <el-tab-pane :label="t('符号、标签和文档')">
          <div class="space-y-4">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <InfoItem :value="detailData.recyclingSymbolGraphic" :label="t('分类回收符号图形')" type="link"/>
                <InfoItem :value="detailData.cadmiumLeadSymbolGraphic" :label="t('镉和铅符号图形')" type="link"/>
                <InfoItem :value="detailData.nonRechargeableGraphic" :label="t('不可充电符号图形')" type="link"/>
                <InfoItem :value="detailData.fireExtinguishingAgent" :label="t('灭火剂类型')"/>
              </div>
              <div class="mt-3">
                <InfoItem :value="detailData.labelSymbolMeaning" :label="t('标签和符号含义')" type="longtext"/>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <InfoItem :value="detailData.euDeclarationOfConformity" :label="t('欧盟符合性声明文档')" type="link"/>
                <InfoItem :value="detailData.dueDiligenceReport" :label="t('尽职调查报告文档')" type="link"/>
              </div>
          </div>
        </el-tab-pane>
        <!-- 废旧电池管理信息 -->
        <el-tab-pane :label="t('废旧电池管理信息')">
          <div class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <InfoItem :value="detailData.wastePreventionInfo" :label="t('废物预防信息文档')" type="link"/>
              <InfoItem :value="detailData.wasteSortingCollectionInfo" :label="t('废物分类收集信息文档')" type="link"/>
              <InfoItem :value="detailData.batteryEndOfLifeInfo" :label="t('电池生命周期信息文档')" type="link"/>
              <InfoItem :value="detailData.safetyMeasuresInfo" :label="t('安全措施信息文档')" type="link"/>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {useI18n} from 'vue-i18n'
import portableBatteryApi from '@/api/portableBatteryApi.js'
import {formatDate} from '@/utils/date'
import {BatteryCategory, document_status, NCM_ENUM} from "@/api/_const.js"
import {portableBatteryEdit, portableBatteryList} from "@/router/index.js"
import InfoItem from "@/views/BatteryPassport/components/InfoItem.vue";
import QrcodeVue from "qrcode.vue";

const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const loading = ref(false)
const detailData = ref({})
const qrValue = ref(window.location.origin + "/public/phone/" + route.params.id)
const qrValue2 = ref("/public/phone/" + route.params.id)

// 获取状态标签类型
const getStatusTagType = (status) => {
  const statusMap = {
    'ACTIVE': 'success',
    'INACTIVE': 'info',
    'PENDING': 'warning',
    'REJECTED': 'danger'
  }
  return statusMap[status] || 'primary'
}

// 获取状态显示文本
const getStatusLabel = (status) => {
  const statusOption = document_status.find(item => item.value === status)
  return statusOption?.label || document_status[0].label
}

// 获取详情数据
const fetchDetail = async () => {
  const id = route.params.id
  if (!id) {
    ElMessage.error(t('无效的ID'))
    return
  }

  loading.value = true
  try {
    const res = await portableBatteryApi.getBatteryPassportById(id)
    if (res.code === 200) {
      detailData.value = res.data
    } else {
      ElMessage.error(res.message || t('获取详情失败'))
    }
  } catch (error) {
    console.error('获取便携式电池详情失败:', error)
    ElMessage.error(t('获取详情失败'))
  } finally {
    loading.value = false
  }
}

// 编辑
const handleEdit = () => {
  const id = route.params.id
  router.push({
    name: portableBatteryEdit,
    params: { id }
  })
}

// 返回列表
const goBack = () => {
  router.push({name: portableBatteryList})
}
const goTo = (path) => {
  router.push(path);
}
onMounted(() => {
  fetchDetail()
})
</script>

<style scoped>
</style>